import React from 'react'
import { ListItemState } from '../../types'
import style from './style.module.scss'
import { formatTimeToChinese } from '../../utils'
interface PropsType {
  item: ListItemState
  onClick?: () => void
}

export const WdListItem: React.FC<PropsType> = ({ item, onClick }) => {
  const imageUrls = item.thumbnail.split(';');

  return <div className={style.list_item} onClick={onClick}>
    {
      imageUrls.length === 3 && <div className={style.three}>
        <h3 className={style.title}>{item.title}</h3>
        <div className={style.images}>
          {
            imageUrls.map((url, i) => <img src={url} className={style.img} key={i}></img>)
          }
        </div>
        <div className={style.btm}>
          <span>{item.source}</span>
          <span>{formatTimeToChinese(item.releaseTime)}</span>
        </div>
      </div>
    }
    {
      imageUrls.length === 1 && <div className={style.one}>
        <div className={style.left}>
          <img src={item.thumbnail} alt="" className={style.img} />
        </div>
        <div className={style.right}>
          <h3 className={style.title}>{item.title}</h3>
          <div className={style.btm}>
            <span>{item.source}</span>
            <span>{formatTimeToChinese(item.releaseTime)}</span>
          </div>
        </div>
      </div>
    }
    {
      imageUrls.length === 0 && <div>无图</div>
    }
  </div>
}